<template>
	<view>
		<view class="top flex flex-direction">
			<text>{{orderDetail.status_str}}</text>
			<text>订单号：{{orderDetail.order_no}}</text>
			<text>下单时间：{{orderDetail.add_time}}</text>
		</view>
		<view class="address-infor flex align-center justify-between">
			<image src="/static/c1.png"></image>
			<view class="flex flex-direction">
				<text>快递名称</text>
				<text>{{orderDetail.express_name}}</text>
			</view>
			<view class="flex justify-between align-center expressno" v-if="orderDetail.express_no">
				<view><text class="lg text-gray">单号:{{orderDetail.express_no}}</text></view>
				<view><button class="cu-btn bg-orange text-white sm" type="button" @tap="copy(orderDetail.express_no)">复制</button></view>
			</view>
			
			<text class="lg text-gray cuIcon-right" @tap='toLogisticsInfor(orderDetail)' v-if="0"></text>
		</view>
		<view class="address flex flex-direction">
			<view class="address-con flex flex-direction">
				<view class="flex align-center">
					<image src="/static/b15.png"></image>
					<text>收货人：{{orderDetail.accept_name}}   {{orderDetail.mobile}}</text>
				</view>
				<text>{{orderDetail.address}} </text>
			</view>
			<image mode="widthFix" src="/static/b14.png"></image>
		</view>
		<view class="list">
			<block v-for="(itg,ind) in orderDetail.order_goods">
			<view class="item flex align-center justify-between">
				<image :src="itg.img_url"></image>
				<view class="flex flex-direction">
					<text>{{itg.title}}</text>
					<text>规格：{{itg.goods_guige}}</text>
				</view>
				<view v-if="judge(itg.is_eva_btn)" class="btn3 margin-top-xl margin-right-xs"  @tap='toEvaluationOrder(itg)'>去评价</view>
				<view v-if="judge(itg.is_return_btn)" class="btn3 margin-top-xl margin-right-sm"  @tap="toApplyReturn(itg,orderDetail)">申请售后</view>
				<view class="flex flex-direction">
					<text class="text-price">{{itg.sell_price}}</text>
					<text>×{{itg.quantity}}</text>
				</view>
			</view>
			</block>
		</view>

		<view class="content">
			<view class="content-list align-center flex justify-between">
				<text class="textb1">商品总金额</text>
				<text class="textb2">￥{{orderDetail.real_amount}}</text>
			</view>
			<!-- <view class="content-list align-center flex justify-between">
				<text class="textb1">累计满减</text>
				<view class="flex align-center">
					<text class="textb2">-￥100</text>
					<view class="textb1">（享全场满减活动，满1000减100）</view>
				</view>
			</view> -->
			<view class="content-list align-center flex justify-between">
				<text class="textb1">快递运费</text>
				<view class="flex align-center">
					<text class="textb2">{{orderDetail.express_fee}}</text>
					<view class="textb1">（享全场包邮活动）</view>
				</view>
			</view>
			<view class="content-list align-center flex justify-between">
				<text class="textb3">订单合计</text>
				<text class="textb4">￥{{orderDetail.order_amount}}</text>
			</view>
		</view>
		<view class="content-lists align-center flex justify-between">
			<text class="textb3">实付款</text>
			<text class="textb5">￥{{orderDetail.order_amount}}</text>
		</view>

		<view class="fapiao flex flex-direction">
			<text>发票信息</text>
			<text>个人发票，发票抬头：{{judgeInvoice(orderDetail.invoice_title)}}</text>
		</view>
		
		<view style="height: 120upx;"></view>
		<view class="bottom flex align-center justify-end">
			<view class="btn1" v-if="judge(orderDetail.is_see_express)" @tap='toLogisticsInfor(orderDetail)'>查看物流</view>
			<view class="btn2" v-if="judge(orderDetail.is_express_btn)" @tap='toCommit(orderDetail)'>确认收货</view>
			<!-- <view class="btn2" v-if="judge(orderDetail.is_return_btn)" @tap="toApplyReturn('退货',orderDetail)">申请售后</view> -->
			<view class="btn2" v-if="judge(orderDetail.is_pay_btn)" @tap='toPayOrder(orderDetail)'>去支付</view>
			<!-- <view class="btn2" v-if="judge(orderDetail.is_eva_btn)" @tap='toEvaluationOrder(orderDetail)'>去评价</view> -->
			<view class="btn2" v-if="judge(orderDetail.is_cancel_btn)"  @tap='cancelOrder(orderDetail)'>取消订单</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				order_no:'',
				orderDetail:'',
			}
		},
		computed: {
			judge: function() {
				return function(val) {
					if(val == '2') {
						return true;
					}else{
						return false;
					}
				}
		
			},
			judgeInvoice: function() {
				return function(val) {
					if(val == '' || val ==undefined) {
						return '-';
					}else{
						return val;
					}
				}
					
			},
		},
		onShow(){
			this.loadOrderDetail()
		},
		onLoad(options){
			if(options.order_no){
				this.order_no = options.order_no
			}
			
		},
		methods: {
			loadOrderDetail(){
				api.get({
					url:'UserOrder/GetOrderDetail',
					data:{order_no:this.order_no},
					success:data=>{
						console.log(JSON.stringify(data));
						if (data.ErrCode == 0) {
							this.orderDetail = data.Response
						}
					}
				});
			},
			cancelOrder: function(item) {
				api.get({
					url: 'UserOrder/GetOrderCancel',
					data: {
						order_no: item.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showModal({
								title: '提示',
								content: '成功',
							})
						}
					}
				});
			},
			toApplyReturn: function(type, item) {
				uni.navigateTo({
					url: '/pages/applyReturn/applyReturn?type=申请售后&order_id=' + item.order_id + '&amount=' + item.order_amount+ '&order_goods_id=' + type.order_goods_id
				})
			
			},
			toPayOrder: function(it) {
				console.log(JSON.stringify(it))
				var tem = {
					order_no: it.order_no,
					order_id: it.order_id,
					order_type: ''
				}
				uni.navigateTo({
					url: '/pages/paymentOrder/paymentOrder?key=' + JSON.stringify(tem)
				})
			
			},
			toEvaluationOrder: function(it) {
				console.log(JSON.stringify(it))
				uni.navigateTo({
					url:'/pages/evaluationOrder/evaluationOrder?key='+it.order_goods_id+'&img_url='+it.img_url
				})
			},
			toLogisticsInfor: function(it) {
				console.log('toLogisticsInfor:'+JSON.stringify(it))
				uni.navigateTo({
					url:'/pages/logisticsInfor/logisticsInfor?key='+it.express_url
				})
			},
			toCommit: function(it) {
				console.log(JSON.stringify(it))
				api.get({
					url: 'UserOrder/GetOrderSuc',
					data: {
						order_no: it.order_no,
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'确认收货成功'
							})
							uni.navigateTo({
								url:'/module/my/myOrder/myOrder'
							})
						}
					}
				});
			},
			copy(str){
				uni.setClipboardData({
					data: str,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				});
			}
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.expressno{
	    width:450upx;
	}
	.textb5{
		font-size: 28upx;
			color: #ee0000;
	}
	.textb3{
		font-size: 28upx;
			color: #000000;
	}
	.textb4{
			font-size: 28upx;
			color: #f70000;
	}
	.textb1{
			font-size: 24upx;
			color: #999999;
	}
	.textb2{
			font-size: 24upx;
			color: #000000;
	}
	.content{
		background-color: #fff;
		padding: 20upx 0;
	}
	.content-list{
		margin-top: 24upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.content-lists{
		border-top: solid 1upx #ddd;
		background-color: #fff;
		padding:20upx;
		box-sizing: border-box;
	}
	.fapiao>text:nth-child(1){
		font-size: 28upx;
			color: #000000;
	}
	.fapiao>text:nth-child(2){
		font-size: 24upx;
			color: #666666;
			margin-top: 10upx;
	}
	.fapiao{
		margin-top: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background-color: #fff;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.btn1{
		width: 160upx;
			height: 54upx;
			border-radius: 27upx;
			border: solid 1upx #cccccc;
			text-align: center;
			line-height: 54upx;
			font-size: 26upx;
				color: #444;
				margin-right: 20upx;
	}
	.btn2{
	width: 160upx;
		height: 54upx;
		border-radius: 27upx;
			border: solid 1upx $btn-bground;
			text-align: center;
			line-height: 54upx;
			font-size: 26upx;
				color: $btn-bground;
	}
	.btn3{
	width: 160upx;
		height: 44upx;
		margin-bottom: -70upx;
		border-radius: 27upx;
			border: solid 1upx $btn-bground;
			text-align: center;
			line-height: 44upx;
			font-size: 20upx;
				color: $btn-bground;
	}
	.address-con>view>text{
			font-size: 28upx;
			color: #000000;
			margin-left: 16upx;
	}
	.address-con>text{
			font-size: 26upx;
			color: #000000;
			margin-left: 40upx;
			margin-top: 20upx;
	}
	.address-con{
		margin-bottom: 20upx;
	}
	.address-con image{
		width: 24upx;
		height: 32upx;
	}
	.address>image{
		width: 100%;
	}
	.address{
		padding: 20upx 20upx 0 20upx;
		box-sizing: border-box;
		background-color: #fff;
		
	}
	.address-infor{
		background-color: #fff;
		margin-top: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		border-bottom: 1upx solid #ddd;
	}
	.address-infor>view{
		
	}
	.address-infor image{
			width: 46upx;
			height: 42upx;
	}
	.address-infor>view>text:nth-child(1){
		font-size: 28upx;
			color: $btn-bground;
	}
	.address-infor>view>text:nth-child(2){
			font-size: 22upx;
			color: #666666;
			margin-top: 8upx;
	}
	.top> text:nth-child(1){
		font-size: 28upx;
			color: $btn-bground;
			margin-bottom: 10upx;
	}
	.top> text:nth-child(2),.top> text:nth-child(3){
		font-size: 24upx;
			color: #828282;
	}
	.top{
		width: 100%;
		background-color: #fff;
		padding:20upx;
	}
	.list{
		margin-top: 20upx;
	}
	.item>view:nth-child(3)>text{
		text-align: right;
			font-size: 24upx;
			color: #000000;
	}
	.item>view:nth-child(3)>text:nth-child(2){
		color: #999999;
	}
	.item>view:nth-child(2){
		width: 382upx;
	}
	.item>view:nth-child(2)>text:nth-child(1){
		font-size: 28upx;
			color: #000000;
	}
	.item>view:nth-child(2)>text:nth-child(2){
	font-size: 22upx;
		color: #999999;
		margin-top: 20upx;
	}
	.item{
		padding: 0 20upx;
		width: 100%;
		height: 190upx;
		background-color: #fff;
		border-bottom: 1upx solid #ddd;
	}
	.item image{
		width: 187upx;
			height: 141upx;
	}
</style>
